dpot-frontend/app/widget/goal/[widgetToken]/style.scss

.goal-widget {
	width: 100%;
	padding: 16px;
	font-family: 'Pretendard', sans-serif;
}

.goal-widget--loading {
	color: #666;
	text-align: center;
}

.goal-title {
	text-align: center;
	margin-bottom: 12px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
	font-size: var(--goal-title-font-size);
	color: var(--goal-title-color);
	font-weight: 700;
}

.goal-bar-wrapper {
	position: relative;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	height: var(--goal-bar-height);
	min-height: 24px;
}

.goal-bar-bg {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background-color: var(--goal-bar-bg-color);
}

.goal-bar-fill {
	height: 100%;
	border-radius: 8px;
	width: var(--goal-bar-fill-width, 0%);
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	background-color: var(--goal-bar-color);

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
		animation: shimmer 2s infinite;
	}
}

.goal-bar-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	font-size: var(--goal-amount-font-size);
	color: var(--goal-amount-color);
	font-weight: 600;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}